<template>
	<view class="page">
		<view class="title f_normal">全部文章</view>
		<view class="main">
			<article-list :articleList="articleList"></article-list>
			<load-more @tap.stop="bindLoading" :status="loadingStatus"></load-more>
		</view>
	</view>
</template>

<script>
import loadMore from '@/components/loadmore/index.vue';
import articleList from '@/components/article-list/index.vue'; // 文章列表组件
import API from '@/static/api/index.js';
const app = getApp();
export default{
	name:'page-article-list',
	components: {
		articleList,
		loadMore
	},
	data(){
		return{
			loadingStatus:'loading',
			articleList:[],
			page_index:1,
			page_size:10,
			isRequest:false
		}
	},
	onShow(){
		this.page_index = 1;
		this.getArticleList()
	},
	methods:{
		// 点击加载
		bindLoading(){
			if(this.loadingStatus=='error'||this.loadingStatus=='empty'){
				this.page_index=1;
				this.getAddressByAddress();
			}
		},
		getArticleList(){
			let {loadingStatus,isRequest,articleList,page_index,page_size}=this;
			if(!isRequest){
				this.loadingStatus = loadingStatus=='nomore'?'nomore':'loading'
				this.isRequest=true
				API.getArticleList({page:page_index,size:page_size}).then(res=>{
					app._log(res)
					this.isRequest=false
					if(res.code==1){
						this.articleList = [...(page_index==1?[]:articleList),...res.data.articles];
						this.loadingStatus = res.data.articles.length==0?'getmore':'nomore';
						this.page_index+=res.data.articles.length==0?0:1
					}
					if(this.articleList.length==0){
						this.loadingStatus='empty'
					}
				}).catch(err=>{
					this.page_index=1;
					this.articleList = [];
					this.loadingStatus ='error';
					this.isRequest=false
				})
			}
		}
	},
	onPullDownRefresh() {
		this.page_index=1;
		this.getArticleList()
	},
	onReachBottom() {
		this.getArticleList()
	}
}
</script>

<style scoped lang="scss">
.page{
	background-color: white;
	.title{
		font-size: 48rpx;
		letter-spacing: 0rpx;
		color: #252748;
		padding: 20rpx 48rpx;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #fff;
		width: 100vw;
	}
	.main{
		margin-top: 130rpx;
		border-top: 16rpx solid #f4f4f4;
	}
}
</style>
